<template>
  <div>
    <vue-loading v-show="!isLoaded"></vue-loading>
    <div v-show="isLoaded">
      <!-- 充值记录 -->
      <el-row class="report-box">
        <el-col :span="24" class="main-title main-v-center">充值记录</el-col>
        <el-col :span="24">
          <div style="width:100%">
            <div class="report-item-box" v-for="itemP of incomeReport">
              <div class="report-item-content">
                <div class="report-item-content-top text-center">{{itemP.title}}</div>
                <div class="text-center report-item-content-bottom">
                  <div style="flex:1">
                    <div class="report-value" style="font-size:30px;">¥ {{itemP.data}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 用户报表 -->
      <el-row class="report-box">
        <el-col :span="24" class="main-title main-v-center">用户报表</el-col>
        <el-col :span="24">
          <div style="width:100%">
            <div class="report-item-box" v-for="itemP of userReport">
              <div class="report-item-content">
                <div class="report-item-content-top">{{itemP.softName}}</div>
                <div class="text-center report-item-content-bottom">
                  <div style="flex:1">
                    <div class="report-value">{{itemP.totalCount}}</div>
                    <div class="report-title">全部用户</div>
                  </div>
                  <div style="flex:1">
                    <div class="report-value">{{itemP.vipCount}}</div>
                    <div class="report-title">付款用户</div>
                  </div>
                  <div style="flex:1">
                    <div class="report-value">{{itemP.onlineCount}}</div>
                    <div class="report-title">在线用户</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 销售报表 -->
      <el-row class="report-box">
        <el-col :span="24" class="main-title main-v-center">销售报表</el-col>
        <el-col :span="24">
          <div style="width:100%">
            <div class="report-item-box" v-for="itemP of saleReport">
              <div class="report-item-content">
                <div class="report-item-content-top">{{itemP.softName}}</div>
                <div class="text-center report-item-content-bottom">
                  <div style="flex:1" v-for="itemC of itemP.data">
                    <div class="report-value">¥{{itemC.data}}</div>
                    <div class="report-title">{{itemC.title}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 卡密报表 -->
      <el-row class="report-box">
        <el-col :span="24" class="main-title main-v-center">卡密报表</el-col>
        <el-col :span="24">
          <el-tabs type="border-card" style="margin: 10px;">
            <el-tab-pane v-for="itemP of keycardReport" :label="itemP.softName">
              <div>
                <div style="display:flex">
                  <div style="flex:1" v-for="itemC of itemP.data">
                    <div>{{itemC.title}}</div>
                    <div>
                      <div v-for="itemCC of itemC.data">
                        <el-form label-position="left" inline class="table-expand1">
                          <el-form-item :label="itemCC.title">
                            <span>{{ itemCC.count}}</span>
                          </el-form-item>
                        </el-form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <!-- 代理报表 -->
      <el-row class="report-box">
        <el-col :span="24" class="main-title main-v-center">代理报表</el-col>
        <el-col :span="24">
          <el-tabs type="border-card" style="margin: 10px;">
            <el-tab-pane v-for="itemP of agentReport" :label="itemP.softName">
              <div>
                <div style="display:flex">
                  <div style="flex:1" v-for="itemC of itemP.data">
                    <div>{{itemC.title}}</div>
                    <div>
                      <div v-for="itemCC of itemC.data">
                        <el-form label-position="left" inline class="table-expand1">
                          <el-form-item :label="itemCC._id">
                            <span>¥ {{ itemCC.total}}</span>
                          </el-form-item>
                        </el-form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      isLoaded: false,
      userReport: [],
      saleReport: [],
      keycardReport: [],
      agentReport: [],
      incomeReport:[],
    };
  },
  created() {
    /* if (this.$store.getters.isFirstRun) {
      this.$http.post("/home/notice", {}).then(res => {
        this.$notify.info({
          title: "通知",
          dangerouslyUseHTMLString: true,
          duration: 0,
          message: res.data
        });
        this.$store.commit("SET_FirstRun", false);
      });
    }

    let p1 = this.$http.post("/home/userreport", {}).then(res => {
      this.userReport = res;
    });
    let p2 = this.$http.post("/home/keycardreport", {}).then(res => {
      this.keycardReport = res;
    });
    let p3 = this.$http.post("/home/payreport", {}).then(res => {
      this.saleReport = res;
    });
    let p4 = this.$http.post("/home/agentreport", {}).then(res => {
      this.agentReport = res;
    });
    let p5= this.$http.post("/home/incomereport", {}).then(res => {
      this.incomeReport = res;
    });
    Promise.all([p1, p2, p3, p4,p5])
      .then(result => {
        this.isLoaded = true;
      })
      .catch(error => {
        console.log(error);
      });
     */
  }
};
</script>
<style >
.head-text {
  float: left;
  color: #99a9bf;
}
.text-center {
  text-align: center;
}
.report-box {
  margin-bottom: 10px;
}
.report-item-box {
  float: left;
  width: 25%;
}
.report-item-content {
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  margin: 10px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.report-item-content-top {
  padding: 8px 10px;
  background-color: #f5f7fa;
  color: #909399;
  border-bottom: 1px solid #e4e7ed;
}
.report-item-content-bottom {
  display: flex;
  padding: 12px 10px;
}
.report-title {
  color: #99a9bf;
}
.report-value {
  color: #24853b;
  margin-bottom: 5px;
}
.table-expand1 {
  font-size: 0;
}
.table-expand1 label {
  width: 170px;
  color: #99a9bf;
}
.table-expand1 .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}
</style>


